<template>
	<div>
		<el-dialog :title="'【设置专题商品】:' + item.title" :modal-append-to-body="false" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1260px">
			<div class="form-title">
				<h3>已添加商品列表</h3>
				<el-button type="warning" @click="openProduct">点击添加商品</el-button>
			</div>
			
			<!-- 搜索商品 -->
			<div class="search-box">
				<el-form ref="queryForm" class="search-form" :inline="true" :model="queryForm" label-width="90px">
					<el-form-item label="选择店铺" prop="shopId">
						<el-select v-model="queryForm.shopId" size="small" filterable placeholder="请输入名字或下拉选择" style="width: 250px;">
							<el-option :label="item.shopName" :value="item.id" v-for="item of allShopList" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称" prop="productName">
						<el-input type="text" size="small" v-model="queryForm.productName" placeholder="请输入商品名称" style="width: 250px;"></el-input>
					</el-form-item>
					<el-form-item>
						<div class="search-submit">
							<el-button type="primary" size="small" @click="submitSearch(1)">查询</el-button>
							<el-button size="small" @click="resetSearch(1)">重置</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="showImage" label="缩略图" width="80" align="center">
					<template slot-scope="scope">
						<el-image style="width: 35px; height: 35px" :src="scope.row.showImage" :preview-src-list="[scope.row.showImage]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="shopName" label="所属店铺" align="center" width="160"></el-table-column>
				<el-table-column prop="priceShow" label="原价(元)" align="center" width="110"></el-table-column>
				<el-table-column prop="price" label="销售价(元)" align="center" width="110"></el-table-column>
				<el-table-column label="购物券" align="center" width="110">
					<template slot-scope="scope">
						{{scope.row.memberPrice}}元+{{scope.row.couponAmount}}券
					</template>
				</el-table-column>
				<el-table-column prop="price" label="充值会员价(元)" align="center" width="116"></el-table-column>
				
				<el-table-column prop="saleStatus" label="售卖状态" align="center" width="100">
					<template slot-scope="scope">
						<el-tag :type="scope.row.saleStatus === 1 ? 'success' : 'info'" disable-transitions>{{scope.row.saleStatus == 0 ? "已停售" : "在售中"}}</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="操作" fixed="right" width="170">
					<template slot-scope="scope">
						<el-button type="success" size="mini" @click="setStatus(scope.row, 'onSale')" v-if="scope.row.saleStatus == 0">起售</el-button>
						<el-button type="danger" size="mini" @click="setStatus(scope.row, 'offSale')" v-if="scope.row.saleStatus == 1">停售</el-button>
						<el-button type="info" size="mini" @click.native.prevent="removeProduct(scope.row)">移除商品</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<div class="page">
				<el-pagination
					background
					@current-change="(val) => handleCurrentChange(val, 1)"
					:current-page="currentPage"
					:page-size="pageSize"
					layout="total, prev, pager, next"
					:total="total"
				></el-pagination>
			</div>
			
			<div slot="footer">
				<el-button @click="close">完 成</el-button>
			</div>
		</el-dialog>
		
		<!-- 添加商品弹窗 -->
		<el-dialog title="选择商品" :modal-append-to-body="false" :visible.sync="isShowProduct" :close-on-click-modal="false" :before-close="closeProduct" width="1100px">
			<!-- 搜索商品 -->
			<div class="search-box">
				<el-form ref="searchForm" class="search-form" :inline="true" :model="searchForm" label-width="90px">
					<el-form-item label="选择店铺" prop="shopId">
						<el-select v-model="searchForm.shopId" size="small" filterable placeholder="请输入名字或下拉选择" style="width: 250px;">
							<el-option :label="item.shopName" :value="item.id" v-for="item of allShopList" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称" prop="productName">
						<el-input type="text" size="small" v-model="searchForm.productName" placeholder="请输入商品名称" style="width: 250px;"></el-input>
					</el-form-item>
					<el-form-item>
						<div class="search-submit">
							<el-button type="primary" size="small" @click="submitSearch(2)">查询</el-button>
							<el-button size="small" @click="resetSearch(1)">重置</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			
			<!-- 商品列表表格 -->
			<el-table :data="productList" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="skuThumbImage" label="缩略图" width="80" align="center">
					<template slot-scope="scope">
						<el-image style="width: 35px; height: 35px" :src="scope.row.skuThumbImage" :preview-src-list="[scope.row.skuThumbImage]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" align="center" width="180"></el-table-column>
				<el-table-column prop="productCode" label="商品编码" align="center" width="120"></el-table-column>
				<el-table-column prop="skuName" label="SKU名称" align="center" width="80"></el-table-column>
				<el-table-column prop="skuCode" label="SKU编码" align="center" width="120"></el-table-column>
				<el-table-column prop="priceShow" label="原价(元)" align="center" width="90"></el-table-column>
				<el-table-column prop="price" label="销售价(元)" align="center" width="90"></el-table-column>
				
				<el-table-column prop="saleChannel" label="销售渠道" align="center" width="100">
					<template slot-scope="scope">
						<el-tag size="small" type="success" v-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
						<el-tag size="small" type="warning" v-else-if="scope.row.saleChannel == 2">直播平台</el-tag>
						<el-tag size="small" v-else>微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag size="small" :type="scope.row.status === 1 ? 'success' : 'warning'" disable-transitions>{{scope.row.status==0 ? "下架" : "上架"}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="saleStatus" label="售卖状态" align="center">
					<template slot-scope="scope">
						<el-tag size="small" :type="scope.row.saleStatus === 1 ? 'success' : 'info'" disable-transitions>{{scope.row.saleStatus == 0 ? "已停售" : "在售中"}}</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="操作" fixed="right" width="120">
					<template slot-scope="scope">
						<el-button type="info" size="mini" disabled v-if="scope.row.showcaseModuleStatus">已添加</el-button>
						<el-button type="primary" size="mini" @click="chooseProduct(scope.row)" v-else>点击选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="(val) => handleCurrentChange(val, 2)"
					:current-page="productListPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="productListPageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="productListTotal"
				></el-pagination>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getShopList } from '@api/shop/shop'
	import { findAllProductSkuSaleListByShop } from '@api/product/productSkuSale'
	import { getSpecialPageProduct, addProductToSpecialPage, setSpecialPageProductStatus } from '@api/platform/platformMarketing'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				allShopList: [], //店铺列表
				
				//已选择的商品
				queryForm: {
					shopId: '',
					productName: '',
					productBarCode: '',
				},
				tableData: [],
				currentPage: 1,
				pageSize: 100,
				total: 0,
				
				//选择商品弹窗
				isShowProduct: false,
				searchForm: {
					shopId: '',
					productName: '',
					productBarCode: '',
				},
				
				productList: [], //商品列表
				productListPage: 1,
				productListPageSize: 10,
				productListTotal: 0,
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getProductList();
					this.getAllShopData();
				}
			},
		},
		methods: {
			getProductList() { //获取专题商品列表
				getSpecialPageProduct({
					shopId: this.queryForm.shopId,
					productName: this.queryForm.productName,
					moduleNo: this.item.id,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			getAllShopData() { //获取全部店铺列表
				getShopList({
					shopPickupStatus: 1,
					pageNum: 1,
					pageSize: 9999
				})
					.then(res => {
						let list = res.data.content;
						let newList = [];
						list.forEach(item => {
							if(item.id != 0) {
								newList.push(item);
							}
						});
						
						this.allShopList = newList;
					})
			},
			setStatus(item, type) {
				setSpecialPageProductStatus({
					showcaseId: item.id,
					action: type,
				})
					.then(() => {
						this.$message.success('操作成功！');
						this.getProductList();
					})
			},
			removeProduct(item) {
				this.$confirm(`您是否确定移除商品【${item.productName}】？移除操作不可撤销！`)
					.then(() => {
						setSpecialPageProductStatus({
							showcaseId: item.id,
							action: 'remove',
						})
							.then(() => {
								this.$message.success('商品移除成功！');
								this.getProductList();
							})
					})
			},
			
			//搜索商品
			submitSearch(type) {
				if(type == 1) {
					this.currentPage = 1;
					this.getProductList();
				} else {
					this.productListPage = 1;
					this.searchShopProduct();
				}
			},
			resetSearch(type) {
				if(type == 1) {
					this.queryForm.shopId = '';
					this.queryForm.productName = '';
					this.queryForm.productBarCode = '';
					this.currentPage = 1;
					this.getProductList();
				} else {
					this.searchForm.shopId = '';
					this.searchForm.productName = '';
					this.searchForm.productBarCode = '';
					this.productListPage = 1;
					this.searchShopProduct();
				}
			},
			
			//添加商品弹窗操作
			openProduct() { //打开添加商品弹窗
				this.isShowProduct = true;
			},
			searchShopProduct() { //搜索商品
				findAllProductSkuSaleListByShop({
					shopId: this.searchForm.shopId,
					productName: this.searchForm.productName,
					productBarCode: this.searchForm.productBarCode,
					moduleNo: this.item.id,
					status: 1,
					saleStatus: 1,
					saleChannel: 0,
					currentPage: this.productListPage,
					pageSize: this.productListPageSize
				})
					.then(res => {
						this.productList = res.data.content;
						this.productListTotal = res.data.total;
					})
			},
			filterProduct(product) {
				let index = this.tableData.findIndex(item => {
					return item.skuSaleId == product.id;
				})
				return index > -1 ? true : false;
			},
			
			handleSizeChange(val) {
				this.productListPageSize = val;
				this.searchShopProduct();
			},
			handleCurrentChange(val, type) {
				if(type == 1) {
					this.currentPage = val;
					this.getProductList();
				} else {
					this.productListPage = val;
					this.searchShopProduct();
				}
			},
			
			chooseProduct(product) { //选择商品
				addProductToSpecialPage({
					moduleNo: this.item.id,
					skuSaleId: product.id,
				})
					.then(() => {
						this.$message.success('添加成功！');
						product.showcaseModuleStatus = true;
						
						this.getProductList();
					})
			},
			closeProduct() {
				this.isShowProduct = false;
				this.searchForm.shopId = '';
				this.searchForm.productName = '';
				this.searchForm.productBarCode = '';
				this.productList = [];
				this.productListPage = 1;
				this.productListTotal = 0;
			},
			close() {
				this.$emit('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		background: #f4f4f4;
		padding: 8px;
		.search-form > div {
			width: auto;
		}
		.el-form-item {
			margin-bottom: 0;
		}
		.search-submit {
			height: 40px;
			align-items: center;
			display: flex;
			padding-left: 30px;
		}
	}
	.form-title {
		align-items: center;
		justify-content: space-between;
		display: flex;
		padding: 0 20px 20px 20px;
		h3 {
			font-size: 18px;
			font-weight: bold;
		}
	}
	.el-table {
		::v-deep .el-table__cell {
			padding: 5px 0;
		}
	}
	.page {
		margin-top: 10px;
	}
</style>